<template>
  <div class="w-3/5 bg-white rounded-lg mx-2 my-2 flex flex-col overflow-hidden transition-all duration-300" :class="{ 'w-full': fullWidth }">
    <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
      <h2 class="text-lg font-semibold text-gray-800 m-0">预览</h2>
      <div class="flex gap-2">
        <button
          v-if="fullWidth"
          @click="$emit('back-to-edit')"
          class="bg-gray-500 text-white border-none rounded px-4 py-2 text-sm cursor-pointer transition-all hover:bg-gray-600"
        >
          返回编辑
        </button>
        <button
          :disabled="exporting"
          @click="$emit('export-pdf')"
          class="bg-purple-500 text-white border-none rounded px-4 py-2 text-sm cursor-pointer transition-all hover:bg-purple-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
        >
          {{ exporting ? '导出中...' : '导出PDF' }}
        </button>
      </div>
    </div>

    <div class="flex-1 p-5 overflow-y-auto">
      <ResumePreview :resume-data="resumeData" :section-order="sectionOrder" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ResumePreview from './ResumePreview.vue'

interface ResumeData {
  name: string
  phone: string
  email: string
  hometown: string
  currentResidence: string
  jobIntention: string
  education: Array<{
    school: string
    major: string
    degree: string
    startDate: string
    endDate: string
  }>
  workExperience: Array<{
    company: string
    position: string
    startDate: string
    endDate: string
    description: string
  }>
  projects: Array<{
    name: string
    role: string
    duration: string
    description: string
  }>
  skills: Array<{
    description: string
  }>
  selfEvaluation: string
}

interface Props {
  resumeData: ResumeData
  fullWidth: boolean
  exporting: boolean
  sectionOrder?: string[]
}

defineProps<Props>()

defineEmits<{
  'export-pdf': []
  'back-to-edit': []
}>()
</script>
